<!-- eslint-disable vue/no-unused-vars -->
<template>
  <div>This is Calendar</div>
  <div class="demo-inner-divider">基本用法</div>
  <e-calendar />
  <div class="demo-inner-divider">自定义内容</div>
  <div>
    <p>Calendar 组件提供了 slot-scope 可以自定义任意单元格内容。slot-scope 参数有2个：</p> 
    <p>date：当前单元格日期；</p>
    <p>data：当前单元格的额外信息。当视图为 month 时，其值为 { type（当前单元格类型，值为 prev-month/current-month/next-month），day（格式化的日期），selected（当前是否选中） }。当视图为 year 时，其值为 { type：current-year，month（格式化的月份），selected（当前是否选中） }。</p>
  </div>
  <div>
    <e-calendar v-model="value" hide-type>
      <template #month="{date, data}">
        <div>
          <e-badge status="warning" text="看苹果发布会" v-if="data.day === '2019-09-11'" />
          <e-badge status="success" text="中秋节" v-if="data.day === '2019-09-13'" />
          <e-badge status="error" text="国庆节" v-if="data.day === '2019-10-01'" />
        </div>
      </template>
    </e-calendar>
  </div>
  <CalendarMd class="markdown-body" />
</template>

<script setup>
import {ref} from "vue"

import CalendarMd from "../../docs/calendar.md"

const value=ref('2019-09-05')
</script>
